<template>
<!-- <div class="example"> -->
  <!-- <a-spin :spinning="spining" /> -->
  <page-layout :title="title">
    <a-card :bordered="false">
      <detail-list title="商品基本信息">
        <detail-list-item term="商品名称">{{ details.goodsName }} </detail-list-item>
        <detail-list-item term="店铺名称">{{ details.shopName }}</detail-list-item>
        <detail-list-item term="种类">{{ details.categoryName }}</detail-list-item>
        <detail-list-item term="价格">{{ details.price }}</detail-list-item>
        <detail-list-item term="库存数量">{{ details.num }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <div class="title">商品规格信息</div>
         <a-table
            :columns="goodsColumns"
            :dataSource="skuList"
              >
         </a-table>
         <div class="examples" >
            <a-button style="margin-right:40px;"  size="large" @click="updateToExamineStatue(0)" :disabled="failButton" type="danger" >驳回审核</a-button>
            <a-button style="margin-left:40px;" size="large"  @click="updateToExamineStatue(1)"  :disabled="successButton" type="primary">审核通过</a-button>
            <a-button  size="large" type="" @click="closetab()" style="float : right">关闭</a-button>
          </div> 
    </a-card>
  </page-layout>
<!-- </div> -->
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import STable from '@/components/table/'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
   import { putAction } from '@/api/manage'
  import { postAction } from '@/api/manage'
  import { getAction } from '@/api/manage'
  const DetailListItem = DetailList.Item

  export default {
    components: {
      PageLayout,
      ABadge,
      DetailList,
      DetailListItem,
      STable
    },
    
    data () {
       
      return {
          flag:"flag",
         state: {
          time: 60,
          smsSendBtn: false,
        },
        successButton: false,
        failButton:false,
        spinning:false,
        details:{},
        skuList:[],
        goodsColumns: [
          {
            title: '商品编号',
            dataIndex: 'id',
            key: 'id'
          },
          {
            title: '商品名称',
            dataIndex: 'title',
            key: 'title'
          },
          // {
          //   title: '商品条码',
          //   dataIndex: 'barcode',
          //   key: 'barcode'
          // },
          // {
          //   title: '单价',
          //   dataIndex: 'price',
          //   key: 'price'
          //   ,
          //   align: 'right'
          // },
          {
            title: '数量（件）',
            dataIndex: 'num',
            key: 'num'
            ,
            align: 'center'
          },
          {
            title: '价格',
            dataIndex: 'price',
            key: 'price'
            ,
            align: 'center'
          }
        ]


      }
    },
    created(){
      this.ToExamine(this.$route.query.record.id);
    },
    mounted(){
    },
    activated(){
      this.ToExamine(this.$route.query.record.id);
      this.successButton=false
      this.failButton=false
    },
    methods: {
    //获取数据 spu+一道多个sku
    ToExamine(ids) {
          let toParams = {id:ids};
          this.$nextTick(function () {
            getAction("/product-api/goodsMain/merchant/getOneGoodsInformation",toParams)
                      .then(res => {
                        if(res.success){
                        this.details = res.result
                        this.skuList=this.details.productSkuList
                        }else{
                          this.$notification[ 'error' ]({
                          message: "错误提示",
                          description:res.message,
                          duration: 4,
                        });
                        }
                      })
                      .catch(err => {
                      });
            })
        },
    //商品的审核 0：审核不通过，1：审核通过
    updateToExamineStatue(flag) {
      this.spining=true
          let toParams = {spuId:this.$route.query.record.id,flag:flag};
          this.$nextTick(function () {
            postAction("/product-api/management/web/toExamineGoods",toParams)
                      .then(res => {
                        if(res.success){
                          this.successButton=true
                          this.$router.back()
                          this.$notification.success({
                              message: '审核结果',
                              description: `商品 : `+"审核通过",
                          });
                          }else{
                              this.failButton=true
                              this.$router.back()
                              this.$notification.success({
                              message: '审核结果',
                              description: `商品 : `+"驳回成功",
                            });
                          }
                      })
                      .catch(err => {
                      });
            })
    },
  //关闭标签
  closetab(){
       this.$router.back()
  },
    
    },
    
    filters: {
      statusFilter(status) {
        const statusMap = {
          'processing': '进行中',
          'success': '完成',
          'failed': '失败'
        }
        return statusMap[status]
      }
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    },
  }
</script>

<style lang="scss" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .examples {
    text-align: center;
    border-radius: 4px;
    margin-bottom: 30px;
    margin-top: 50px;
  }
</style>
<style lang="scss" scoped>
  .totop{
    height: 50px;
    width: 300px;
    color: red;
  }
  .toleft{

  }
  .tocenter{

  }
  .toright{

  }
</style>